<template>
	<div>
		<div class="block">
			<div>
				<h3 class="title">html</h3>
				<div class="info"><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="small"/><span class="ava">向元浩</span><span class="time"><Icon type="ios-clock-outline"></Icon>2017-12-16</span><span class="reader"><Icon type="eye"></Icon>阅读:(121)</span><span  class="conmpont"><Icon type="ios-compose-outline"></Icon>评论:(11)</span></div>
				<p class="text">“div+CSS”可以说是WEB标准在中国的一个里程碑式的标志，连原先只懂table的程序员也知道WEB标准不是简单的把table换成div，甚至开始会关注WEB标准的一些东西，比如对SEO的效果。
WEB标准化有利于SEO，但不单只为了SEO，学习是需要动机的，就像一开始推广的时候，重点是说站点的“换肤”、“改版”功能，这个对于初接触CSS布局和喜欢个性化的同学来说有一定的吸引力，这也是为了更好的推广WEB标准。感觉现在（样式布局对SEO的优化）SEO被越来越多的人所关注，特别是用来说服领导支持使用WEB标准。做为推广WEB标准的一种方式，我并不反对，但往往推广者本身并不能理解WEB标准，以SEO为目的推广WEB标准，虽然都是推广了WEB标准，但所产生的影响并不见得是积极的。SEO所使用的一些方法跟WEB标准是</p>
				<p class="ReadMore"><router-link v-bind="{to:'/details/'+1}">阅读全文</router-link></p>
			</div>
		</div>
		<div class="block">
			<div>
				<h3 class="title">html</h3>
				<div class="info"><Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="small"/><span class="ava">向元浩</span><span class="time"><Icon type="ios-clock-outline"></Icon>2017-12-16</span><span class="reader"><Icon type="eye"></Icon>阅读:(121)</span><span  class="conmpont"><Icon type="ios-compose-outline"></Icon>评论:(11)</span></div>
				<p class="text">“div+CSS”可以说是WEB标准在中国的一个里程碑式的标志，连原先只懂table的程序员也知道WEB标准不是简单的把table换成div，甚至开始会关注WEB标准的一些东西，比如对SEO的效果。
WEB标准化有利于SEO，但不单只为了SEO，学习是需要动机的，就像一开始推广的时候，重点是说站点的“换肤”、“改版”功能，这个对于初接触CSS布局和喜欢个性化的同学来说有一定的吸引力，这也是为了更好的推广WEB标准。感觉现在（样式布局对SEO的优化）SEO被越来越多的人所关注，特别是用来说服领导支持使用WEB标准。做为推广WEB标准的一种方式，我并不反对，但往往推广者本身并不能理解WEB标准，以SEO为目的推广WEB标准，虽然都是推广了WEB标准，但所产生的影响并不见得是积极的。SEO所使用的一些方法跟WEB标准是</p>
				<p class="ReadMore"><a>阅读全文</a></p>
			</div>
		</div>
		<div  class="page"><Page :total="100" size="small"></Page></div>
	</div>
</template>

<script>
	export default{
		name:'index',
		data(){
			return{
				
			}
		}
	}
</script>

<style scoped>
	.title{
		font-size: 30px;
		color: #555;
	}
	.info{
		height: 36px;
    	line-height: 36px;
    	font-size: 14px;
	}
	.info .ivu-avatar{
		top: -2px;
		margin-right: 5px;
	}
	.info .ivu-icon{
		font-size: 12px;
		padding-right: 5px;
	}
	.ava{
		color: #999;
    	font-size: 12px;
	}
	.time,.conmpont,.reader{
		color: #999;
    	font-size: 12px;
		padding-left: 20px;
	}
	.block{
		position: relative;
	    overflow: hidden;
	    background: #fcfcfa;
	    padding: 25px 15px;
	    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
	    margin-bottom: 20px;
	}
	.page{
		margin-top: 20px;
		background: #fff;
		text-align: center;
		padding: 10px 0;
		margin-bottom: 20px;
	}
	.text{
		margin-top: 10px;
		font-size: 14px;
		color: #444;
		line-height: 20px;
	}
	.ReadMore{
		margin-top: 20px;
	}
	.ReadMore a{
		display: inline-block;
	    background: #e67e22;
	    text-align: center;
	    width: 100px;
	    height: 34px;
	    line-height: 34px;
	    border-radius: 3px;
	    color: #fff;
	    font-size: 12px;
	    font-family: '微软雅黑';
	    text-decoration: none;
    }
</style>